<script lang="ts" setup>
import useDog from "./useDog";
import useSum from "./useSum";

/*
    Remark:
        Hooks 实际上相当于是个集合。 将相关的数据，和方法， 包括生命周期函数都整合到一个js/ts中。
        如果在大型开发中， 这个是很有用的。
*/
const { sum, changeSum, bigSum } = useSum();
const { dogList, getDog } = useDog();
</script>

<template>
  <div>
    <h2>当前求和为{{ sum }}</h2>
    <h2>bigSum:{{ bigSum }}</h2>
    <button @click="changeSum">点我Sum+1</button>
    <hr />
    <button @click="getDog">获取狗的图片</button>
    <br />
    <img v-for="(item, index) of dogList" :key="index" :src="item" />
  </div>
</template>

<style scoped>
img {
  height: 200px;
  margin-left: 5px;
}
</style>